<template>
	<div class="content_box">
		<div class="content_left">
			<div class="content_left_title public_card">项目名称1111</div>
			<div class="content_left_ul public_card">
				<div class="header">
					<img />
					<div class="header_title">
						<div>实例分割</div>
						<div>轴对齐边界框</div>
					</div>
				</div>
				<div class="split_box">
					<div style="position: sticky;top: 0;background-color: #fff;z-index: 1;padding-top: 14px;">
						<div class="split_title">模型训练</div>
						<div @click="carterSplit" class="carter_split">创建模型</div>
					</div>
					<div v-for="(item, index) in splitData" :key="index" class="split_item">
						<div class="split_item_title">
							<div>{{ item.title }}</div>
							<div class="split_item_actions">
								<img @click="handleCommentClick(index, $event)" src="../static/images/split/comment.png"
									class="comment-img">
								<img src="../static/images/split/more.png">
								<div v-if="showPopconfirm === index" class="custom-popconfirm">
									<div class="popconfirm-arrow"></div>
									<div class="popconfirm-content">
										<div class="popconfirm-content-title">拆分评论</div>
										<textarea class="popconfirm-content-txt" placeholder="请输入" />
										<div class="popconfirm-content-btn">
											<div @click="closePopconfirm" class="popconfirm-content-btn-cancel">取消</div>
											<div @click="closePopconfirm" class="popconfirm-content-btn-submit">确定</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="split_item_content">
							<div>compact（256*256）</div>
							<div>新模型</div>
							<div>开始训练</div>
							<div>未评估结果</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="content_right">
			<div class="content_right_monitoring public_card">
				<div @click="carterSplit" class="content_right_monitoring_title">资源监控</div>
				<div class="item_s">
					<div class="item_s_title">
						<div></div>
						<div>内存</div>
					</div>
					<div class="item_s_num">
						<div style="flex: 1;">
							<div>12%</div>
							<div>占用率</div>
						</div>
						<div style="flex: 1;">
							<div>12%</div>
							<div>占用率</div>
						</div>
					</div>
				</div>
				<div class="RAM">
					<div class="ram-header">
						<div class="ram-title">内存</div>
						<div class="ram-total">{{ totalMemory }}</div>
					</div>
					<div class="ram-usage">
						<div class="ram-usage-text">内存使用量</div>
						<div class="ram-usage-value">{{ usedMemory }}</div>
					</div>
					<div class="ram-chart">
						<ChartCanvas v-if="memoryHistory.length > 0" :key="'memory-' + memoryHistory.length"
							:width="200" :height="97" :data="memoryHistory" :grid-size="20" indicator-text="使用中" />
						<div v-else class="chart-loading">加载中...</div>
					</div>
					<div class="ram-timeline">
						<span class="timeline-start">60 秒</span>
						<span class="timeline-end">0</span>
					</div>
					<div class="ram-composition">
						<div class="composition-bar">
							<div class="composition-used" :style="{ width: usagePercentage + '%' }"></div>
						</div>
					</div>
				</div>
				<div class="item_s">
					<div class="item_s_title">
						<div></div>
						<div>CPU</div>
					</div>
					<div class="item_s_num">
						<div style="flex: 1;">
							<div>12%</div>
							<div>占用率</div>
						</div>
						<div style="flex: 1;">
							<div>12%</div>
							<div>占用率</div>
						</div>
					</div>
				</div>
				<div class="RAM">
					<div class="ram-header">
						<div class="ram-title">CPU</div>
						<div class="ram-total" style="font-size: 10px;">11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
						</div>
					</div>
					<div class="ram-usage">
						<div class="ram-usage-text">% 利用率</div>
						<div class="ram-usage-value">{{ cpuUsagePercentage }}%</div>
					</div>
					<div class="ram-chart">
						<ChartCanvas v-if="cpuHistory.length > 0" :key="'cpu-' + cpuHistory.length" :width="200"
							:height="97" :data="cpuHistory" :grid-size="20" indicator-text="使用中" />
						<div v-else class="chart-loading">加载中...</div>
					</div>
				</div>
				<div class="item_s">
					<div class="item_s_title">
						<div></div>
						<div>GPU</div>
					</div>
					<div class="item_s_num">
						<div style="flex: 1;">
							<div>12%</div>
							<div>占用率</div>
						</div>
						<div style="flex: 1;">
							<div>12%</div>
							<div>占用率</div>
						</div>
					</div>
				</div>
				<div class="GPU">
					<div class="gpu-header">
						<div class="gpu-title">GPU</div>
						<div class="gpu-name">{{ gpuName }}</div>
					</div>
					<div class="gpu-grid">
						<div class="gpu-chart-item">
							<div class="gpu-chart-header">
								<span class="gpu-chart-collapse">▼</span>
								<span class="gpu-chart-name">3D</span>
								<span class="gpu-chart-usage">{{ gpuSubsystems['3D'].usage }}%</span>
							</div>
							<div class="gpu-chart-container">
								<ChartCanvas v-if="gpuSubsystems['3D'].history.length > 0"
									:key="'gpu-3d-' + gpuSubsystems['3D'].history.length" :width="90" :height="70"
									:data="gpuSubsystems['3D'].history" :grid-size="10" :amplify="10"
									indicator-text="使用中" />
								<div v-else class="chart-loading">加载中...</div>
							</div>
						</div>
						<div class="gpu-chart-item">
							<div class="gpu-chart-header">
								<span class="gpu-chart-collapse">▼</span>
								<span class="gpu-chart-name">Copy</span>
								<span class="gpu-chart-usage">{{ gpuSubsystems['Copy'].usage }}%</span>
							</div>
							<div class="gpu-chart-container">
								<ChartCanvas v-if="gpuSubsystems['Copy'].history.length > 0"
									:key="'gpu-copy-' + gpuSubsystems['Copy'].history.length" :width="90" :height="70"
									:data="gpuSubsystems['Copy'].history" :grid-size="10" :amplify="10"
									indicator-text="使用中" />
								<div v-else class="chart-loading">加载中...</div>
							</div>
						</div>
						<div class="gpu-chart-item">
							<div class="gpu-chart-header">
								<span class="gpu-chart-collapse">▼</span>
								<span class="gpu-chart-name">Video Decode</span>
								<span class="gpu-chart-usage">{{ gpuSubsystems['Video Decode'].usage }}%</span>
							</div>
							<div class="gpu-chart-container">
								<ChartCanvas v-if="gpuSubsystems['Video Decode'].history.length > 0"
									:key="'gpu-video-decode-' + gpuSubsystems['Video Decode'].history.length"
									:width="90" :height="70" :data="gpuSubsystems['Video Decode'].history"
									:grid-size="10" :amplify="10" indicator-text="使用中" />
								<div v-else class="chart-loading">加载中...</div>
							</div>
						</div>
						<div class="gpu-chart-item">
							<div class="gpu-chart-header">
								<span class="gpu-chart-collapse">▼</span>
								<span class="gpu-chart-name">Video Processing</span>
								<span class="gpu-chart-usage">{{ gpuSubsystems['Video Processing'].usage }}%</span>
							</div>
							<div class="gpu-chart-container">
								<ChartCanvas v-if="gpuSubsystems['Video Processing'].history.length > 0"
									:key="'gpu-video-processing-' + gpuSubsystems['Video Processing'].history.length"
									:width="90" :height="70" :data="gpuSubsystems['Video Processing'].history"
									:grid-size="10" :amplify="10" indicator-text="使用中" />
								<div v-else class="chart-loading">加载中...</div>
							</div>
						</div>
					</div>
					<div class="gpu-memory">
						<div class="gpu-memory-header">
							<span class="gpu-memory-label">共享 GPU 内存</span>
							<span class="gpu-memory-total">{{ gpuMemoryTotal }}</span>
						</div>
						<div class="gpu-memory-bar">
							<div class="gpu-memory-used" :style="{ width: gpuMemoryUsage + '%' }"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="content_right_setting_box">
				<div class="title_box">
					<div @click="onShowSettings" :class="{ 'cursor_static': isResult }"
						class="public_card content_right_setting_card">
						<img src="../static/images/split/setting-filled@2x.png" />
						<div>设置</div>
					</div>
					<div @click="onShowResult" :class="{ 'cursor_static': !isResult }"
						class="public_card content_right_setting_card">
						<img src="../static/images/split/setting-filled@2x.png" />
						<div>结果</div>
					</div>
				</div>
				<!-- 训练 -->
				<div v-if="!isResult" class="content_right_setting_box_content">
					<div class="content_right_setting_box_content_left">
						<div class="content_right_setting_split public_card">
							<div class="content_right_setting_split_title">
								<div>拆分</div>
								<el-select placeholder-class="split_placeholder" v-model="splitModel"
									placeholder="请选择拆分"></el-select>
							</div>
							<div class="content_right_top_left_s">
								<div class="content_right_top_left_pie" ref="rightPieRef"></div>
								<div class="content_right_table">
									<div class="thead">
										<div>数据集</div>
										<div>实例</div>
										<div>图像</div>
									</div>
									<div class="scroll_h">
										<div v-for="item in 3" :key="item" class="tr">
											<div>训练</div>
											<div>2(100%)</div>
											<div>9(100%)</div>
										</div>
									</div>
									<div class="thead">
										<div>拆分集中的总数</div>
										<div>2</div>
										<div>2</div>
									</div>
								</div>
							</div>
						</div>
						<div class="content_right_setting_train_params public_card">
							<div class="content_right_setting_train_params_title">训练参数</div>
							<div class="content_right_setting_train_params_table">
								<div class="form_box">
									<div class="form_item_label">Epoch数量：</div>
									<div class="dialog_center_table_item">
										<div class="jian">
											<img src="../static/images/split/jian.png" />
										</div>
										<div class="num">1</div>
										<div class="jia">
											<img src="../static/images/split/jia.png" />
										</div>
									</div>
								</div>
								<div class="form_box">
									<div class="form_item_label">学习率权重：</div>
									<div class="dialog_center_table_item">
										<div class="jian">
											<img src="../static/images/split/jian.png" />
										</div>
										<div class="num">1</div>
										<div class="jia">
											<img src="../static/images/split/jia.png" />
										</div>
									</div>
								</div>
								<div class="form_box">
									<div class="form_item_label">批次大小：</div>
									<div class="dialog_center_table_item">
										<div class="jian">
											<img src="../static/images/split/jian.png" />
										</div>
										<div class="num">1</div>
										<div class="jia">
											<img src="../static/images/split/jia.png" />
										</div>
									</div>
								</div>
								<div class="form_box">
									<div class="form_item_label">
										<div class="form_item_label_checkbox">
											<el-checkbox v-model="checked1" size="large" />
											<div>随机种子：</div>
										</div>
									</div>
									<div class="dialog_center_table_item">
										<div class="jian">
											<img src="../static/images/split/jian.png" />
										</div>
										<div class="num">1</div>
										<div class="jia">
											<img src="../static/images/split/jia.png" />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="enhance_box public_card">
							<div class="enhance_box_title">图像增强</div>
							<div v-for="(item, index) in enhanceData" :key="index" class="enhance_box_content">
								<div class="enhance_box_content_label_checkbox">
									<el-checkbox v-model="checked1" size="large" />
									<div>{{ item.label }}</div>
								</div>
								<div class="enhance_box_content_input">
									<div class="enhance_box_content_input_label">概率：</div>
									<el-input v-model="input1" placeholder="请输入">
										<template #append>%</template>
									</el-input>
								</div>
								<div class="enhance_box_content_input">
									<div class="enhance_box_content_input_label">范围：</div>
									<el-select v-if="item.type === 'select'" v-model="value" placeholder="请选择">
										<el-option label="90°" value="90" />
										<el-option label="180°" value="180" />
										<el-option label="270°" value="270" />
									</el-select>
									<el-input v-if="item.type === 'append'" v-model="input1" placeholder="请输入">
										<template #append>%</template>
									</el-input>
									<el-input v-if="item.type === 'input'" v-model="input1" placeholder="请输入" />
								</div>
							</div>
						</div>
					</div>
					<div class="content_right_setting_box_content_right">
						<div class="equipment_box public_card">
							<div class="public_card_title">设备</div>
							<el-select v-model="value" placeholder="请选择">
								<el-option label="CPU" value="1" />
								<el-option label="GPU" value="2" />
								<el-option label="TPU" value="3" />
							</el-select>
						</div>
						<div class="neural_network_box public_card">
							<div class="public_card_title">神经网络</div>
							<div class="neural_network_box_form">
								<div class="label">预训练模型：</div>
								<el-select v-model="value" placeholder="请选择"></el-select>
							</div>
							<div class="form_box" style="margin-top: 16px;">
								<div class="form_item_label">图像宽度：</div>
								<div class="dialog_center_table_item">
									<div class="jian">
										<img src="../static/images/split/jian.png" />
									</div>
									<div class="num">1</div>
									<div class="jia">
										<img src="../static/images/split/jia.png" />
									</div>
								</div>
							</div>
							<div class="form_box" style="margin-top: 16px;">
								<div class="form_item_label">图像高度：</div>
								<div class="dialog_center_table_item">
									<div class="jian">
										<img src="../static/images/split/jian.png" />
									</div>
									<div class="num">1</div>
									<div class="jia">
										<img src="../static/images/split/jia.png" />
									</div>
								</div>
							</div>
							<div class="model_params">模型参数：</div>
							<div class="model_params_content">
								<div v-for="item in 10" :key="item" class="model_params_content_item">
									<div class="model_params_content_item_label">参数一：</div>
									<el-input placeholder="请输入" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 训练结果 -->
				<div v-else class="content_right_setting_box_content">
					<div class="result_box_left">
						<div class="train_status_box public_card">
							<div class="public_card_title">训练状态</div>
							<div class="train_status_box_content">
								<div class="train_status_box_item" v-for="(item, index) in trainStatusData"
									:key="index">
									<div class="train_status_box_item_label">{{ item.label }}</div>
									<div class="train_status_box_item_value">{{ item.value }}</div>
								</div>
							</div>
							<div class="line"></div>
							<div class="train_status_box_content">
								<div class="train_status_box_item">
									<div class="train_status_box_item_label">已用时间</div>
									<div class="train_status_box_item_value">00:00:09</div>
								</div>
								<div class="train_status_box_item">
									<div class="train_status_box_item_label">剩余时间</div>
									<div class="train_status_box_item_value">00:05:22</div>
								</div>
							</div>
						</div>
						<div class="train_status_box public_card">
							<div class="public_card_title">评估状态</div>
							<div class="train_status_box_content">
								<div class="train_status_box_item">
									<div class="train_status_box_item_label">最佳Epoch</div>
									<div class="train_status_box_item_value">2.3</div>
								</div>
							</div>
						</div>
					</div>
					<div class="result_box_right public_card">
						<div class="result_box_right_line_box">
							<div class="result_box_right_line_box_title">
								<div>损失</div>
								<div>Epoch</div>
							</div>
							<div class="line_charts" ref="lineChartsRef"></div>
						</div>
						<div class="line"></div>
						<div class="result_box_right_line_box">
							<div class="result_box_right_line_box_title">
								<div>损失</div>
								<div>Epoch</div>
							</div>
							<div class="line_charts" ref="lineChartsRefTwo"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue'
import ChartCanvas from '@components/ChartCanvas.vue'

const lineChartsRef = ref(null)
const lineChartsRefTwo = ref(null)
const checked1 = ref(false)
const input1 = ref('')
const value = ref('90')
const isResult = ref(false)

const trainStatusData = ref([
	{
		label: 'Epoch',
		value: '1/20',
	},
	{
		label: '迭代',
		value: '1/180',
	},
	{
		label: '当前任务',
		value: '训练',
	},
	{
		label: '学习速率',
		value: '0.0001',
	},
	{
		label: '损失',
		value: '0.00986293',
	}
])

const enhanceData = ref([
	{
		label: '随机旋转',
		value: '90',
		range: '90',
		type: 'select',
	},
	{
		label: '随机平移',
		value: '90',
		range: '90',
		type: 'append',
	},
	{
		label: '随机缩放',
		value: '90',
		range: '90',
		type: 'append',
	},
	{
		label: '随机翻转',
		value: '90',
		range: '90',
		type: 'append',
	},
	{
		label: '对比度',
		value: '90',
		range: '90',
		type: 'append',
	},
	{
		label: '亮度',
		value: '90',
		range: '90',
		type: 'input',
	},
	{
		label: '饱和度',
		value: '90',
		range: '90',
		type: 'input',
	},

])

// popconfirm状态管理 (-1表示不显示，>=0表示显示对应索引的popconfirm)
const showPopconfirm = ref(-1)
// 存储弹出框位置信息
const popconfirmPosition = ref({ top: 0, left: 0 })

// 内存监控相关数据
const totalMemoryGB = ref(16.0)
const usedMemoryGB = ref(15.7)
const memoryHistory = ref([0.8, 0.75, 0.82, 0.78, 0.85]) // 初始化一些数据
let memoryTimer = null

// CPU监控相关数据
const cpuUsagePercentage = ref(85)
const cpuHistory = ref([0.7, 0.72, 0.68, 0.75, 0.73]) // 初始化一些数据

// GPU监控相关数据
const gpuName = ref('Intel(R) Iris(R) Xe Graphics')
const gpuMemoryTotal = ref('7.9 GB')
const gpuMemoryUsed = ref('2.1 GB')
const gpuMemoryUsage = ref(26.6) // 百分比

// GPU子系统数据
const gpuSubsystems = ref({
	'3D': {
		name: '3D',
		usage: 3,
		history: [0.03, 0.025, 0.035, 0.028, 0.032] // 初始化一些数据
	},
	'Copy': {
		name: 'Copy',
		usage: 0,
		history: [0.001, 0.002, 0.001, 0.001, 0.002] // 初始化一些数据
	},
	'Video Decode': {
		name: 'Video Decode',
		usage: 0,
		history: [0.001, 0.001, 0.002, 0.001, 0.001] // 初始化一些数据
	},
	'Video Processing': {
		name: 'Video Processing',
		usage: 0,
		history: [0.001, 0.002, 0.001, 0.001, 0.001] // 初始化一些数据
	}
})

// 图表配置
const MAX_DATA_POINTS = 60

// 计算属性
const totalMemory = computed(() => `${totalMemoryGB.value.toFixed(1)} GB`)
const usedMemory = computed(() => `${usedMemoryGB.value.toFixed(1)} GB`)
const usagePercentage = computed(() => ((usedMemoryGB.value / totalMemoryGB.value) * 100).toFixed(1))

// 示例数据
const splitData = ref([
	{
		title: '拆分-250702-123321',
		percentage: '69·15·15%',
		images: '13个图像(100%)',
		instances: '4个实例(100%)',
	},
	{
		title: '拆分-250702-456789',
		percentage: '80·10·10%',
		images: '20个图像(100%)',
		instances: '8个实例(100%)',
	},
	{
		title: '拆分-250702-456789',
		percentage: '80·10·10%',
		images: '20个图像(100%)',
		instances: '8个实例(100%)',
	},
	{
		title: '拆分-250702-456789',
		percentage: '80·10·10%',
		images: '20个图像(100%)',
		instances: '8个实例(100%)',
	},
	{
		title: '拆分-250702-456789',
		percentage: '80·10·10%',
		images: '20个图像(100%)',
		instances: '8个实例(100%)',
	}
])

// 饼图的 ref
const rightPieRef = ref(null)

// 饼图数据（基于表格数据）
const rightPieData = ref([
	{ value: 80, name: '训练集', color: '#2165F8' },
	{ value: 10, name: '验证集', color: '#FA8B14' },
])


onMounted(() => {
	// 添加全局点击事件监听器
	document.addEventListener('click', handleClickOutside)
	
	// 添加滚动事件监听器，当列表滚动时关闭弹出框
	const splitBox = document.querySelector('.split_box')
	if (splitBox) {
		splitBox.addEventListener('scroll', closePopconfirm)
	}

	// 初始化内存监控
	initMemoryMonitoring()

	nextTick(() => {
		initAllPies()
	})
})

onUnmounted(() => {
	// 清理全局点击事件监听器
	document.removeEventListener('click', handleClickOutside)
	
	// 清理滚动事件监听器
	const splitBox = document.querySelector('.split_box')
	if (splitBox) {
		splitBox.removeEventListener('scroll', closePopconfirm)
	}

	// 清理内存监控定时器
	if (memoryTimer) {
		clearInterval(memoryTimer)
	}

	// 清理折线图实例
	if (lineChartsRef.value && lineChartsRef.value._chartInstance) {
		lineChartsRef.value._chartInstance.dispose()
		if (lineChartsRef.value._resizeHandler) {
			window.removeEventListener('resize', lineChartsRef.value._resizeHandler)
		}
	}
	if (lineChartsRefTwo.value && lineChartsRefTwo.value._chartInstance) {
		lineChartsRefTwo.value._chartInstance.dispose()
		if (lineChartsRefTwo.value._resizeHandler) {
			window.removeEventListener('resize', lineChartsRefTwo.value._resizeHandler)
		}
	}
})

const onShowResult = () => {
	isResult.value = true
	nextTick(() => {
		initAllPies()
	})
}

const onShowSettings = () => {
	isResult.value = false
	nextTick(() => {
		initAllPies()
	})
}

// 初始化所有饼图
const initAllPies = () => {
	if (rightPieRef.value) {
		initPie(rightPieRef.value, rightPieData.value)
	}

	// 初始化折线图
	initLossLineChart()
}

// 初始化单个饼图
const initPie = (element, data) => {
	// 如果已经存在图表实例，先销毁
	if (element._chartInstance) {
		element._chartInstance.dispose()
	}

	const myChart = echarts.init(element)
	// 将图表实例保存到DOM元素上，便于后续清理
	element._chartInstance = myChart

	const option = {
		series: [
			{
				type: 'pie',
				radius: ['50%', '100%'], // 环形饼图
				center: ['50%', '50%'],
				data: data.map(item => ({
					value: item.value,
					name: item.name,
					itemStyle: {
						color: item.color
					}
				})),
				label: {
					show: false // 隐藏标签
				},
				labelLine: {
					show: false // 隐藏标签线
				},
				emphasis: {
					scale: false // 禁用鼠标悬停放大效果
				}
			}
		]
	}

	myChart.setOption(option)

	// 响应式调整
	const resizeHandler = () => {
		myChart.resize()
	}
	window.addEventListener('resize', resizeHandler)

	// 保存resize处理器，便于清理
	element._resizeHandler = resizeHandler
}

// 初始化折线图
const initLineChart = (element, data, options = {}) => {
	if (!element) return

	// 如果已经存在图表实例，先销毁
	if (element._chartInstance) {
		element._chartInstance.dispose()
	}

	const myChart = echarts.init(element)
	// 将图表实例保存到DOM元素上，便于后续清理
	element._chartInstance = myChart

	// 默认配置
	const defaultOptions = {
		color: '#2165F8',
		areaColorStart: 'rgba(33, 101, 248, .5)',
		areaColorEnd: 'rgba(33, 101, 248, .1)'
	}

	// 合并默认配置和传入的配置
	const mergedOptions = { ...defaultOptions, ...options }

	const option = {
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			top: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: false,
			splitLine: {
				show: false,
				lineStyle: {
					color: '#eee',
					type: 'solid' // 实线
				}
			}
		},
		yAxis: {
			type: 'value',
			axisLine: {
				show: false // 不显示Y轴线
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#eee',
					type: 'solid' // 实线
				}
			},
			axisTick: {
				show: false
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			},
		},
		series: [{
			data: data,
			type: 'line',
			smooth: true,
			symbolSize: 6,
			itemStyle: {
				color: mergedOptions.color,
			},
			lineStyle: {
				color: mergedOptions.color,
				width: 2
			},
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: mergedOptions.areaColorStart
					}, {
						offset: 1,
						color: mergedOptions.areaColorEnd
					}]
				}
			}
		}]
	}

	myChart.setOption(option)

	// 响应式调整
	const resizeHandler = () => {
		myChart.resize()
	}
	window.addEventListener('resize', resizeHandler)

	// 保存resize处理器，便于清理
	element._resizeHandler = resizeHandler
}

// 初始化损失折线图
const initLossLineChart = () => {
	if (!lineChartsRef.value) return

	// 与图片完全一致的数据点
	const data = [
		[0, 1.5],
		[5, 1.2],
		[10, 2.2],
		[15, 0.5],
		[20, 0.2]
	]

	// 调用通用折线图初始化方法
	initLineChart(lineChartsRef.value, data)
	initLineChart(lineChartsRefTwo.value, data, {
		color: '#F89117',
		areaColorStart: 'rgba(248, 145, 23, .5)',
		areaColorEnd: 'rgba(248, 145, 23, .1)'
	})
}

// 处理点击外部区域关闭popconfirm
const handleClickOutside = (event) => {
	const popconfirm = document.querySelector('.custom-popconfirm')
	const commentImgs = document.querySelectorAll('.comment-img')

	if (showPopconfirm.value >= 0 && popconfirm) {
		let clickedOnCommentImg = false
		commentImgs.forEach(img => {
			if (img.contains(event.target)) {
				clickedOnCommentImg = true
			}
		})

		if (!popconfirm.contains(event.target) && !clickedOnCommentImg) {
			closePopconfirm()
		}
	}
}

// 处理comment图片点击事件
const handleCommentClick = (index, event) => {
	// 切换弹出框显示状态
	showPopconfirm.value = showPopconfirm.value === index ? -1 : index
	
	// 如果是显示弹出框，则计算位置
	if (showPopconfirm.value === index) {
		// 获取点击位置
		const { clientX, clientY } = event
		// 获取页面滚动位置
		const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
		const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
		
		// 设置弹出框位置（相对于文档）
		popconfirmPosition.value = {
			top: clientY + scrollTop + 10, // 向下偏移10px
			left: clientX + scrollLeft + 10 // 向右偏移10px
		}
	}
}

// 关闭popconfirm
const closePopconfirm = () => {
	showPopconfirm.value = -1
}

// 暴露常量给模板使用
const carterSplit = () => {

}

// 初始化内存监控
const initMemoryMonitoring = () => {


	// 初始化内存历史数据
	memoryHistory.value = []
	for (let i = 0; i < MAX_DATA_POINTS; i++) {
		memoryHistory.value.push(Math.random() * 0.3 + 0.7) // 70%-100% 之间的随机值
	}


	// 初始化CPU历史数据
	cpuHistory.value = []
	for (let i = 0; i < MAX_DATA_POINTS; i++) {
		cpuHistory.value.push(Math.random() * 0.3 + 0.7) // 70%-100% 之间的随机值
	}


	// 初始化GPU子系统历史数据
	Object.keys(gpuSubsystems.value).forEach(key => {
		gpuSubsystems.value[key].history = []
		for (let i = 0; i < MAX_DATA_POINTS; i++) {
			// 为不同子系统设置不同的基础使用率
			let baseUsage = 0
			if (key === '3D') baseUsage = 0.03 // 3%左右
			else baseUsage = 0.001 // 接近0%

			gpuSubsystems.value[key].history.push(Math.random() * 0.02 + baseUsage)
		}
	})


	// 等待 DOM 更新后开始绘制图表

	setTimeout(() => {
		// 设置定时器更新数据
		memoryTimer = setInterval(() => {
			try {
				updateMemoryData()
				updateCpuData()
				updateAllGpuData()
			} catch (error) {

			}
		}, 1000) // 每秒更新一次
	}, 500) // 增加等待时间确保 DOM 完全加载
}

// 更新内存数据
const updateMemoryData = () => {
	// 移除最旧的数据点
	memoryHistory.value.shift()

	// 添加新的数据点（模拟内存使用变化）
	const lastValue = memoryHistory.value[memoryHistory.value.length - 1]
	const change = (Math.random() - 0.5) * 0.05 // -2.5% 到 +2.5% 的变化
	const newValue = Math.max(0.5, Math.min(1.0, lastValue + change)) // 限制在 50%-100% 之间

	memoryHistory.value.push(newValue)

	// 更新显示的内存使用量
	usedMemoryGB.value = newValue * totalMemoryGB.value

}

// 更新CPU数据
const updateCpuData = () => {
	// 移除最旧的数据点
	cpuHistory.value.shift()

	// 添加新的数据点（模拟CPU使用变化）
	const lastValue = cpuHistory.value[cpuHistory.value.length - 1]
	const change = (Math.random() - 0.5) * 0.1 // -5% 到 +5% 的变化
	const newValue = Math.max(0.3, Math.min(1.0, lastValue + change)) // 限制在 30%-100% 之间

	cpuHistory.value.push(newValue)

	// 更新显示的CPU使用率
	cpuUsagePercentage.value = Math.round(newValue * 100)

}

// 更新所有GPU子系统数据
const updateAllGpuData = () => {
	Object.keys(gpuSubsystems.value).forEach(key => {
		const subsystem = gpuSubsystems.value[key]

		// 移除最旧的数据点
		subsystem.history.shift()

		// 添加新的数据点（模拟GPU使用变化）
		const lastValue = subsystem.history[subsystem.history.length - 1]
		let change = (Math.random() - 0.5) * 0.01 // 较小的变化幅度

		// 为3D子系统设置更活跃的变化
		if (key === '3D') {
			change = (Math.random() - 0.5) * 0.02
		}

		const newValue = Math.max(0, Math.min(0.1, lastValue + change)) // 限制在 0%-10% 之间
		subsystem.history.push(newValue)

		// 更新显示的使用率
		subsystem.usage = Math.round(newValue * 100)
	})

	// 更新GPU内存使用（模拟变化）
	const memoryChange = (Math.random() - 0.5) * 0.5 // -0.25% 到 +0.25% 的变化
	gpuMemoryUsage.value = Math.max(20, Math.min(80, gpuMemoryUsage.value + memoryChange))
	gpuMemoryUsed.value = ((gpuMemoryUsage.value / 100) * 7.9).toFixed(1) + ' GB'

}
</script>

<style scoped lang="scss">
.content_box {
	height: calc(100% - 7px);
	padding: 7px 15px 0 15px;
	display: flex;

	.content_left {
		flex-shrink: 0;
		width: 235px;
		display: flex;
		flex-direction: column;
		margin-right: 11px;

		.content_left_title {
			padding: 0 15px;
			line-height: 50px;
			margin-bottom: 10px;
			font-size: 14px;
		}

		.content_left_ul {
			flex: 1;

			.header {
				display: flex;
				align-items: center;
				padding: 14px 15px;
				border-bottom: 1px solid rgba(117, 138, 179, 0.2);

				img {
					margin-right: 10px;
					width: 38px;
					height: 35px;
					border-radius: 50%;
				}

				.header_title {
					div:nth-child(1) {
						font-weight: 400;
						font-size: 14px;
						color: #333333;
						line-height: 21px;
						margin-bottom: 4px;
					}

					div:nth-child(2) {
						font-weight: 400;
						font-size: 12px;
						color: #606266;
						line-height: 18px;
					}
				}
			}

			.split_box {
				padding: 0 15px 14px 15px;
				height: calc(100vh - 270px);
				overflow-y: auto;

				// 自定义滚动条样式
				&::-webkit-scrollbar {
					width: 6px;
				}

				&::-webkit-scrollbar-track {
					background: rgba(0, 0, 0, 0.1);
					border-radius: 3px;
				}

				&::-webkit-scrollbar-thumb {
					background: rgba(0, 0, 0, 0.3);
					border-radius: 3px;

					&:hover {
						background: rgba(0, 0, 0, 0.5);
					}
				}

				.split_title {
					font-weight: 400;
					font-size: 14px;
					color: #222222;
					line-height: 20px;
				}

				.carter_split {
					cursor: pointer;
					margin-top: 10px;
					width: 100%;
					border: 1px solid #2165F8;
					border-radius: 22px;
					font-weight: 500;
					font-size: 14px;
					color: #2165F8;
					line-height: 40px;
					text-align: center;
				}

				.split_item {
					margin-top: 14px;
					background: rgba(255, 255, 255, 0.79);
					border-radius: 8px;
					border: 1px solid #DCE5E6;
					padding: 14px 10px 16px 14px;

					.split_item_title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 12px;

						div:nth-child(1) {
							font-weight: 400;
							font-size: 12px;
							color: #333333;
							line-height: 12px;
						}

						.split_item_actions {
							position: relative;
							display: flex;
							align-items: center;

							.comment-img {
								cursor: pointer;
								width: 12px;
								height: 12px;
								margin-right: 16px;
							}

							img:nth-child(2) {
								cursor: pointer;
								width: 12px;
								height: 3px;
							}

							.custom-popconfirm {
								position: fixed; // 改为fixed定位，相对于视口
								top: v-bind('popconfirmPosition.top + "px"'); // 使用动态计算的位置
								left: v-bind('popconfirmPosition.left + "px"'); // 使用动态计算的位置
								background: rgba(0, 0, 0, 0.75);
								border-radius: 6px;
								z-index: 1000;

								.popconfirm-arrow {
									position: absolute;
									left: -6px; // 在popconfirm左侧
									top: 10px; // 距离上边10px
									width: 0;
									height: 0;
									border-top: 6px solid transparent;
									border-bottom: 6px solid transparent;
									border-right: 6px solid rgba(0, 0, 0, 0.75); // 向左指向的三角箭头
								}

								.popconfirm-content {
									padding: 10px 21px 13px 19px;

									.popconfirm-content-title {
										font-weight: 400;
										font-size: 14px;
										color: #FFFFFF;
										line-height: 22px;
										margin-bottom: 8px;
									}

									.popconfirm-content-txt {
										width: 304px;
										height: 80px;
										padding: 8px 12px;
										background: #FFFFFF;
										border-radius: 6px;
										border: 1px solid rgba(255, 255, 255, 0.2);
										font-weight: 400;
										font-size: 14px;
									}

									.popconfirm-content-btn {
										display: flex;
										align-items: center;
										justify-content: end;
										gap: 15px;
										font-weight: 400;
										font-size: 14px;
										margin-top: 15px;

										&-cancel {
											background: #FFFFFF;
											border-radius: 4px;
											border: 1px solid rgba(0, 0, 0, 0.15);
											color: rgba(0, 0, 0, 0.88);
											line-height: 24px;
											padding: 0 8px;
											cursor: pointer;
										}

										&-submit {
											background: #1677FF;
											border-radius: 4px;
											border: 1px solid #1677FF;
											color: #FFFFFF;
											line-height: 24px;
											padding: 0 8px;
											cursor: pointer;
										}
									}
								}
							}
						}
					}

					.split_item_content {
						font-weight: 400;
						font-size: 12px;
						color: #606266;
						line-height: 12px;

						div:nth-child(1) {
							margin-bottom: 18px;
						}

						div:nth-child(2) {
							margin-bottom: 10px;
						}

						div:nth-child(3) {
							width: 90px;
							line-height: 30px;
							text-align: center;
							border-radius: 16px;
							border: 1px solid #2165F8;
							font-weight: 500;
							font-size: 12px;
							color: #2165F8;
							margin-bottom: 14px;
							cursor: pointer;
						}

						div:nth-child(4) {
							margin-bottom: 10px;
						}
					}
				}
			}
		}
	}

	.content_right {
		display: flex;
		flex: 1;
		gap: 10px;

		.content_right_monitoring {
			padding: 17px 10px 10px 19px;
			width: 235px;
			height: calc(100vh - 127px);
			overflow-y: auto;

			// 自定义滚动条样式
			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-track {
				background: rgba(0, 0, 0, 0.1);
				border-radius: 3px;
			}

			&::-webkit-scrollbar-thumb {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 3px;

				&:hover {
					background: rgba(0, 0, 0, 0.5);
				}
			}

			&_title {
				font-weight: 500;
				font-size: 14px;
				color: #303133;
				line-height: 14px;
				margin-bottom: 14px;
			}

			.item_s {
				width: 100%;
				height: 80px;
				background: #F4F7FE;
				border-radius: 7px;
				padding-top: 10px;
				padding-bottom: 14px;

				.item_s_title {
					display: flex;
					padding-left: 11px;

					div:first-child {
						width: 5px;
						height: 5px;
						background: #2165F8;
						flex-shrink: 0;
						margin: 4px 4px 4px 0;
						border-radius: 50%;
					}

					div:last-child {
						font-weight: 500;
						font-size: 12px;
						color: #303133;
						line-height: 12px;
					}
				}

				.item_s_num {
					display: flex;
					font-weight: 500;
					font-size: 12px;
					color: #2165F8;
					line-height: 20px;
					text-align: center;
				}
			}

			.RAM {

				.ram-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8px;

					.ram-title {
						font-weight: 500;
						font-size: 14px;
						color: #303133;
					}

					.ram-total {
						font-weight: 500;
						font-size: 14px;
						color: #303133;
					}
				}

				.ram-usage {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12px;

					.ram-usage-text {
						font-size: 12px;
						color: #606266;
					}

					.ram-usage-value {
						font-size: 12px;
						color: #606266;
					}
				}

				.ram-chart {
					position: relative;
					margin-bottom: 8px;

					canvas {
						display: block;
						border: 1px solid rgb(208, 159, 222);
						border-radius: 4px;
					}

					.ram-usage-indicator {
						position: absolute;
						top: 20px;
						left: 50%;
						transform: translateX(-50%);
						background: rgba(0, 0, 0, 0.7);
						color: white;
						padding: 4px 8px;
						border-radius: 4px;
						font-size: 12px;

						.usage-label {
							font-size: 12px;
						}
					}
				}

				.ram-timeline {
					display: flex;
					justify-content: space-between;
					margin-bottom: 12px;
					font-size: 12px;
					color: #606266;
				}

				.ram-composition {
					.composition-bar {
						width: 100%;
						height: 30px;
						border: 1px solid rgb(208, 159, 222);
						overflow: hidden;

						.composition-used {
							height: 100%;
							background: rgba(208, 159, 222, .3);
							transition: width 0.3s ease;
							border-right: 1px solid rgb(208, 159, 222);
						}
					}
				}


			}

			.GPU {

				.gpu-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12px;

					.gpu-title {
						font-weight: 500;
						font-size: 14px;
						color: #303133;
					}

					.gpu-name {
						font-weight: 400;
						font-size: 10px;
						color: #303133;
						max-width: 120px;
						text-align: right;
						line-height: 1.2;
					}
				}

				.gpu-grid {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 10px;
					margin-bottom: 15px;

					.gpu-chart-item {

						.gpu-chart-header {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 6px;
							font-size: 11px;

							.gpu-chart-collapse {
								color: #666;
								font-size: 8px;
								margin-right: 4px;
							}

							.gpu-chart-name {
								flex: 1;
								color: #333;
								font-weight: 500;
							}

							.gpu-chart-usage {
								color: #666;
								font-weight: 400;
							}
						}

						.gpu-chart-container {
							position: relative;
							height: 70px;

							canvas {
								width: 100%;
								height: 100%;
								display: block;
								border: 1px solid rgb(208, 159, 222);
								border-radius: 2px;
								background: #fff;
							}

							.gpu-usage-indicator {
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								background: rgba(0, 0, 0, 0.7);
								color: white;
								padding: 2px 6px;
								border-radius: 3px;
								font-size: 10px;
								white-space: nowrap;

								.usage-label {
									font-size: 10px;
								}
							}
						}
					}
				}

				.gpu-memory {
					margin-top: 15px;

					.gpu-memory-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8px;

						.gpu-memory-label {
							font-size: 12px;
							color: #606266;
						}

						.gpu-memory-total {
							font-size: 12px;
							color: #303133;
							font-weight: 500;
						}
					}

					.gpu-memory-bar {
						width: 100%;
						height: 25px;
						border: 1px solid rgb(208, 159, 222);
						overflow: hidden;

						.gpu-memory-used {
							height: 100%;
							background: rgba(208, 159, 222, 0.6);
							transition: width 0.3s ease;
							border-right: 1px solid rgb(208, 159, 222);
						}
					}
				}
			}

			.chart-loading {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 97px;
				border: 1px solid rgb(208, 159, 222);
				border-radius: 4px;
				background: #f9f9f9;
				color: #666;
				font-size: 12px;
			}
		}

		.content_right_setting_box {
			flex: 1;
			display: flex;
			flex-direction: column;

			.title_box {
				display: flex;
				gap: 10px;

				.cursor_static {
					cursor: pointer;
				}

				.content_right_setting_card {
					width: 100%;
					padding: 13px 14px;
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 13px;
					color: #303133;

					img {
						width: 16px;
						height: 16px;
						flex-shrink: 0;
						margin: 7px;
					}
				}
			}

			.content_right_setting_box_content {
				flex: 1;
				display: flex;
				gap: 10px;

				.content_right_setting_box_content_left {
					flex: 1;
					flex-shrink: 0;

					.content_right_setting_split {
						margin-top: 10px;
						padding: 10px 10px 17px 10px;

						&_title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-weight: 500;
							font-size: 14px;
							color: #303133;
							margin-bottom: 17px;

							div {
								flex-shrink: 0;
							}

							.el-select {

								width: 150px;

								::v-deep .el-select__wrapper {
									line-height: 12px;
									min-height: 24px;
									padding: 6px 10px;
								}

								::v-deep .el-select__placeholder {
									font-weight: 400;
									font-size: 12px;
									color: #303133;
								}
							}
						}

						.content_right_top_left_s {
							display: flex;
							align-items: center;
							margin-top: 20px;

							.content_right_top_left_pie {
								width: 100px;
								height: 100px;
								flex-shrink: 0;
								margin-right: 3px;
							}

							.content_right_table {
								flex: 1;

								.thead {
									display: flex;
									align-items: center;
									line-height: 20px;
									background: rgba(0, 0, 0, 0.04);
									border-radius: 6px;
									text-align: center;
									font-weight: 400;
									font-size: 10px;
									color: #606266;

									div {
										flex: 1;
									}
								}

								.scroll_h {
									height: 70px;
									overflow-y: auto;
									margin-bottom: 12px;

									&::-webkit-scrollbar {
										display: none;
									}

									scrollbar-width: none;
									-ms-overflow-style: none;

									.tr {
										margin-top: 12px;
										display: flex;
										align-items: center;
										text-align: center;
										line-height: 12px;
										font-weight: 500;
										font-size: 12px;
										color: #303133;

										div {
											flex: 1;
										}
									}
								}
							}

						}
					}


					.content_right_setting_train_params {
						margin-top: 10px;
						padding: 15px 10px 17px 10px;

						&_title {
							font-weight: 500;
							font-size: 14px;
							color: #303133;
							line-height: 14px;
						}

						.content_right_setting_train_params_table {
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							margin-top: 12px;

							.form_item_label_checkbox {
								display: flex;
								align-items: center;
								gap: 4px;

								div {
									flex-shrink: 0;
								}
							}

							.form_item_label {
								flex-shrink: 0;
								width: 76px;
								text-align: right;
							}
						}
					}

					.enhance_box {
						padding: 15px 10px;
						margin-top: 10px;
						height: calc(100vh - 538px);
						overflow-y: auto;

						.enhance_box_title {
							font-weight: 500;
							font-size: 14px;
							color: #303133;
							line-height: 14px;
						}

						.enhance_box_content {
							display: grid;
							grid-template-columns: repeat(3, 1fr);

							.enhance_box_content_label_checkbox {
								display: flex;
								align-items: center;
								gap: 6px;
								font-weight: 400;
								font-size: 12px;
								color: #606266;
								line-height: 18px;
							}

							.enhance_box_content_input {
								display: flex;
								align-items: center;

								.enhance_box_content_input_label {
									font-weight: 400;
									font-size: 12px;
									color: #606266;
									line-height: 12px;
									flex-shrink: 0;
								}

								::v-deep .el-input-group {
									border-radius: 2px;
									border: 1px solid #BFBFBF;
									font-weight: 400;
									font-size: 10px;
									color: #8C8C8C;
									width: 69px;
									overflow: hidden;

									.el-input__wrapper {
										box-shadow: unset;
										padding: 5px;

										.el-input__inner {
											line-height: 10px;
											height: 10px;
										}

										.is-focus {
											box-shadow: unset;
										}
									}

									.el-input-group__append {
										box-shadow: unset;
										background-color: unset;
										padding: 0;
										padding-right: 6px;
									}
								}

								::v-deep .el-input--large {
									--el-input-inner-height: unset;
									--el-input-height: unset;
								}


								::v-deep .el-select {
									border-radius: 2px;
									border: 1px solid #BFBFBF;
									color: #8C8C8C;
									width: 69px;
									overflow: hidden;

									.el-select__wrapper {
										box-shadow: unset;
										padding: 2.5px 5px;
										line-height: unset;
										min-height: unset;
									}

									.el-select__input-wrapper {
										input {
											line-height: 10px;
											height: unset;
										}
									}

									.el-select__placeholder {
										line-height: 10px;

										span {
											font-weight: 400;
											font-size: 10px;
										}
									}
								}

								::v-deep .el-input {
									font-weight: 400;
									font-size: 10px;
									width: 69px;
									border-radius: 2px;
									border: 1px solid #BFBFBF;
									color: #8C8C8C;
									overflow: hidden;

									.el-input__wrapper {
										padding: 4px 5px;
										box-shadow: unset;
									}
								}
							}
						}
					}

				}

				.content_right_setting_box_content_right {
					flex: 1;
					flex-shrink: 0;
					margin-top: 10px;

					.equipment_box {
						padding: 15px 10px 21px 10px;

						::v-deep .el-select--large {
							margin-top: 20px;
							border-radius: 8px;
							border: 1px solid #BFBFBF;
							color: #8C8C8C;
							overflow: hidden;

							.el-select__wrapper {
								padding: 8px 10px;
								line-height: unset;
								min-height: unset;
								box-shadow: unset;

							}

							.el-select__input-wrapper {
								input {
									line-height: 10px;
									height: unset;
								}
							}

							.el-select__placeholder {
								line-height: 10px;

								span {
									font-weight: 400;
									font-size: 12px;
								}
							}
						}
					}

					.neural_network_box {
						margin-top: 10px;
						padding: 15px 10px 40px 10px;

						.neural_network_box_form {
							display: flex;
							align-items: center;

							.label {
								font-weight: 400;
								font-size: 12px;
								color: #303133;
								line-height: 12px;
								flex-shrink: 0;
								margin-right: 4px;
							}

							::v-deep .el-select--large {
								border-radius: 8px;
								border: 1px solid #BFBFBF;
								color: #8C8C8C;
								overflow: hidden;
								width: 150px;

								.el-select__wrapper {
									padding: 5px 10px;
									line-height: unset;
									min-height: unset;
									box-shadow: unset;

								}

								.el-select__input-wrapper {
									input {
										line-height: 10px;
										height: unset;
									}
								}

								.el-select__placeholder {
									line-height: 10px;

									span {
										font-weight: 400;
										font-size: 12px;
									}
								}
							}
						}

						.model_params {
							margin-top: 18px;
							margin-bottom: 10px;
							font-weight: 400;
							font-size: 12px;
							color: #303133;
							line-height: 12px;
						}

						.model_params_content {
							height: calc(100vh - 536px);
							overflow-y: auto;
							padding: 16px;
							background: #F7F8FD;
							border-radius: 7px;
							border: 1px solid #EDEDED;

							.model_params_content_item:first-child {
								margin-top: 0;
							}

							.model_params_content_item {
								display: flex;
								align-items: center;
								gap: 4px;
								margin-top: 20px;

								.model_params_content_item_label {
									font-weight: 400;
									font-size: 12px;
									color: #606266;
									line-height: 12px;
									flex-shrink: 0;
								}

								::v-deep .el-input--large {
									--el-input-inner-height: unset;
									--el-input-height: unset;
								}

								::v-deep .el-input {
									font-weight: 400;
									font-size: 10px;
									width: 69px;
									border-radius: 2px;
									border: 1px solid #BFBFBF;
									color: #8C8C8C;
									overflow: hidden;

									.el-input__wrapper {
										padding: 4px 5px;
										box-shadow: unset;
									}
								}
							}
						}
					}
				}

				.result_box_left {
					width: 235px;
					display: flex;
					flex-direction: column;

					.train_status_box:last-child {
						flex: 1;
					}

					.train_status_box {
						padding: 17px 0;
						margin-top: 10px;

						.public_card_title {
							margin-left: 10px;
						}

						.train_status_box_content {
							padding: 0 10px 15px 10px;

							.train_status_box_item {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.train_status_box_item_label {
									font-weight: 400;
									font-size: 12px;
									color: #606266;
									line-height: 24px;
								}

								.train_status_box_item_value {
									font-weight: 500;
									font-size: 12px;
									color: #333333;
									line-height: 24px;
								}
							}
						}

						.line {
							border: 1px solid rgba(117, 138, 179, 0.2);
						}
					}

				}

				.result_box_right {
					flex: 1;
					margin-top: 10px;
					padding-top: 16px;

					.result_box_right_line_box {
						padding: 0 14px 0 13px;

						.result_box_right_line_box_title {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20px;

							div:first-child {
								font-weight: 500;
								font-size: 14px;
								color: #303133;
								line-height: 14px;
							}

							div:last-child {
								font-weight: 400;
								font-size: 12px;
								color: #606266;
								line-height: 12px;
							}

						}

						.line_charts {
							width: 100%;
							height: 250px;
						}

					}

					.line {
						border: 1px solid rgba(117, 138, 179, 0.2);
						margin-top: 38px;
						margin-bottom: 46px;
					}
				}
			}
		}
	}

	.form_box {
		display: flex;
		align-items: center;

		.form_item_label {
			font-weight: 400;
			font-size: 12px;
			color: #303133;
			line-height: 12px;
		}

		.dialog_center_table_item {
			flex: 1;
			display: flex;
			align-items: center;
			border-radius: 2px 0px 0px 2px;

			.jian {
				width: 20px;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #BFBFBF;
				border-right: unset;
				cursor: pointer;
				border-radius: 2px 0px 0px 2px;

				img {
					width: 8px;
					height: 1px;
				}
			}

			.num {
				text-align: center;
				border: 1px solid #BFBFBF;
				width: 30px;
				line-height: 18px;
				font-weight: 400;
				font-size: 10px;
				color: #333333;
			}

			.jia {
				width: 20px;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #BFBFBF;
				border-left: unset;
				cursor: pointer;
				border-radius: 0px 2px 2px 0px;

				img {
					width: 8px;
					height: 8px;
				}
			}
		}
	}
}
</style>